<template>
  <div class="nearby-item" @click="jump_detail">
    <!-- 图片 -->
    <div class="pic-box">
      <div class="left-pic">
        <van-image :src="pic_urls[0].url">
          <template v-slot:loading>
            <img src="@/assets/goImages/8P.png" />
          </template>
        </van-image>
      </div>
      <div class="right-pic">
        <div class="top-pic">
          <van-image :src="pic_urls[1].url">
            <template v-slot:loading>
              <img src="@/assets/goImages/8P.png" />
            </template>
          </van-image>
        </div>
        <div class="bottom-pic">
          <van-image :src="pic_urls[2].url">
            <template v-slot:loading>
              <img src="@/assets/goImages/8P.png" />
            </template>
          </van-image>
        </div>
      </div>
    </div>
    <!-- 描述 -->
    <div class="desc-box">
      <div class="title">{{ title }}</div>
      <div class="media">
        <span class="side-show">{{ side_count }}晒图</span>
        <span class="spot">·</span>
        <span class="video">{{ video_count }}视频</span>
      </div>
      <div class="address-box">
        <span class="address">{{ address }}</span>
        <span class="distance">{{ distance }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pic_urls: Array,
    title: String,
    side_count: Number,
    video_count: Number,
    address: String,
    distance: String,
    id: Number,
    type: String
  },
  methods: {
    jump_detail() {
      if (this.type == 'feed') {
        this.$router.replace('/feeds/' + this.id)
        this.$emit('refresh')
      } else {
        this.$router.push('/businesses/' + this.id)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.nearby-item {
  display: flex;
  padding: 15px 0;

  .pic-box {
    display: flex;
    width: 120px;
    overflow: hidden;
    border-radius: 5px;
    .left-pic {
      flex: 2;
      height: 80px;
      margin-right: 2px;

      ::v-deep .van-image {
        height: 100%;
        width: 100%;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
    .right-pic {
      flex: 1;
      height: 80px;
      display: flex;
      flex-direction: column;

      .top-pic,
      .bottom-pic {
        flex: 1;
        height: 40px;
        &.top-pic {
          height: 39px;
          margin-bottom: 1px;
        }

        ::v-deep .van-image {
          height: 100%;
          width: 100%;
          img {
            height: 39px;
            width: 100%;
          }
        }
      }
    }
  }
  .desc-box {
    flex: 1;
    padding-left: 10px;

    .title {
      color: #4a4a4a;
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      max-width: 225px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .media,
    .address-box {
      line-height: 24px;
      font-size: 14px;
      font-weight: 500;
      color: #b0b0b0;

      &.address-box {
        display: flex;
        justify-content: space-between;

        .address {
          max-width: 185px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .spot {
        padding: 0 2px;
        font-weight: 700;
      }
    }
  }
}
</style>
